<template>
  <div class="comment">
    <!-- 按钮+搜索框 -->
    <el-row>
        <el-col :span="8" style="margin-bottom:10px;">
          <el-checkbox v-model="chooseAll" @change="chooseAllChange">全选</el-checkbox>
          <el-button type="primary" @click="selectReply">回复</el-button>
          <el-button type="danger" @click="delComments" style="margin-left:20px;">批量删除</el-button>
          <el-button type="success" @click="chekComments">批量审核</el-button>
        </el-col>
      </el-row>
     
     <!-- 回复表单 -->
     <el-dialog 
        title="回复评论" 
        :visible="dialogReplyVisible" 
        @close="dialogReplyVisible = false">
        <el-form :model="commentReply">
          <el-form-item label="回复内容" :label-width="formLabelWidth">
            <el-input style="width: 420px;" type="textarea" :rows="8" 
                   v-model="commentReply.content" placeholder="请填写内容"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogReplyVisible = false">取 消</el-button>
          <el-button type="primary" @click="replyComment">确 定</el-button>
        </div>
      </el-dialog>

     <!-- 表格主体 -->
    <el-table :data="commentData" border style="width: 100%">
      <el-table-column fixed prop="id" label="选择" width="100">
        <!-- 需要知道选中的是谁 -->
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isChoose"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column fixed prop="id" label="评论编号" width="100">
      </el-table-column>
      <el-table-column prop="content" label="评论内容" width="300">
      </el-table-column>
      <el-table-column prop="create_time" label="评论时间" width="200">
      </el-table-column>
      <el-table-column prop="username" label="评论人名称" width="100">
      </el-table-column>
      <el-table-column prop="useremail" label="评论人邮箱" width="100">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status ===0">未审核</el-tag>
            <el-tag v-else>审核通过</el-tag>
         </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="delComment(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

   
    
  </div>
</template>

<script>
export default {
  async created() {
    this.getAllComments();
  },
  data() {
    return {
      commentData: [],
      searchKeyword:'',

      chooseAll:false,   //表示是否全选
      dialogReplyVisible: false,
      formLabelWidth: '120px',
      commentReply:{},
    };
  },
  //深度监听
  watch:{
    commentData:{
      handler(){
        this.chooseAll=this.commentData.every(comment=>comment.isChoose);
      },
      //开启深度监听
      deep:true
    }
  },

  methods: {
    //删除按钮
    async delComment(obj) {
      console.log("删除", obj);
      let res = await this.$http.commentHttp.delComment(obj);
      console.log("删除结果", res);
      if (res.data.message == "删除成功") {
        //element提供的弹窗api
        this.$message({
          message: "删除成功",
          type: "success",
        });
      }
      //重新获取数据
      this.getAllComments();
    },

    //获取所有评论内容
    async getAllComments() {
      let res = await this.$http.commentHttp.findAllComments();
      //给每个用户用户对象添加是否被选中的状态，用于控制该用户在页面上的选中状态
      console.log(res);
      res.data.forEach((comment)=> {
        //添加属性
        comment.isChoose=false;
      });
      this.commentData = res.data;
    },

    //全选改变
    chooseAllChange(){
      console.log(this.chooseAll);
      //将每个数据的isChoose改变
      this.commentData.forEach(comment=>{
        comment.isChoose=this.chooseAll
      })
    },

    //批量删除
    async delComments(){
      let toDelComments=this.commentData.filter(comment=>comment.isChoose==true);
      let ids=toDelComments.map(comment=>comment.id);
      //批量删除
      let result=await this.$http.commentHttp.delComments({
        ids
      })
      if(result.data.data>0){
        this.$message({
          message:'批量删除成功',
          type:'success'
        })
      }else{
        this.$message({
          message:'批量删除失败',
          type:'error'
        })
      }
    },

    //选择回复
    async selectReply() {
      let comment = this.commentData.filter(comment=>comment.isChoose===true);
      let id = comment.map(comment=>comment.id);
      let status = comment.map(comment=>comment.status);
      status = parseInt(String(status));

      if(id.length < 1){
        alert("请选择要回复的评论！");
      } else if(id.length > 1) {
        alert("只能选择一条评论进行回复！");
      } else if( status == 0 ) {
        alert("请选择已审核的评论进行回复！");
      } else {
        this.dialogReplyVisible= true;
        this.commentReply = {...this.commentReply};
        this.id = id;
      }
    },
    async replyComment() {
      console.log("进入replyComment");
      if(this.commentReply.content == null) {
        alert("不能回复空！");
      } else {
        console.log("id:"+typeof this.id);
        let id = parseInt(this.id);

        let res = await reply(this.id, this.commentReply.content);
        this.dialogReplyVisible= false;
      }
    }
  },

  //批量审核
    async chekComments() {
      let toCekComments = this.commentData.filter(comment=>comment.isChoose===true);
      console.log(toCekComments,'sss')
      //勾选评论数据构成的id的数组
      let ids = toCekComments.map(comment=>comment.id);
      console.log(ids[0],'ddd');

      //使用批量审核api
      let result=await this.$http.commentHttp.chekComments({
        ids
      });
      if(result.data.data>0){
        this.$message({
          message:'批量审核成功',
          type:'success'
        })
      }else{
        this.$message({
          message:'批量审核失败',
          type:'error'
        })
      };
      this.fetchCommentList(1,5);
    },

};
</script>